<template>
  <el-dialog v-model="dialogVisible" title="统计" width="1400px" class="more-filters-dialog">
    <div>

      <el-date-picker style="margin-right:8px" v-model="monthDate" type="month" placeholder="请选择月份" @change="bindChangeAllDate($event,'month')" />
      <el-select v-model="quarterDate" style="margin-right:8px" placeholder="请选择季度" @change="bindChangeAllDate($event,'quarterDate')" clearable>
        <el-option v-for="dict in quarterList" :key="dict.value" :label="dict.label" :value="dict.value" />
      </el-select>
      <el-date-picker style="margin-right:8px" v-model="yearDate" type="year" placeholder="请选择年份" @change="bindChangeAllDate($event,'year')" />

      <!-- <el-radio-group v-model="radio" class='marhin' @change='bindChangeTab'>
        <el-radio-button label="1" value="1">本年</el-radio-button>
        <el-radio-button label="2" value="2">本季</el-radio-button>
        <el-radio-button label="3" value="3">本月</el-radio-button>
      </el-radio-group> -->
      <div class="" style="height: 600px;">
        <BarEchert v-if="echartsBarData1.xaxis?.length" :echartsData="echartsBarData1" id="bar1" />
        <el-empty v-if="echartsBarData1.xaxis.length==0"></el-empty>
      </div>

    </div>
  </el-dialog>
</template>

<script setup>
import moment from 'moment';
import BarEchert from "./barEchert.vue";
const echartsBarData1 = ref({ series: [{ data: [] }, { data: [] }] })
const dialogVisible = ref(false)
const radio = ref('1')
const monthDate = ref(moment().format('YYYY-MM'))
const yearDate = ref()
const quarterDate = ref()
const quarterList = ref([{ label: "第一季度  01.01-03.31", value: 0 }, { label: "第二季度  04.01-06.30", value: 1 }, { label: "第三季度  07.01-09.30", value: 2 }, { label: "第四季度  10.01-12.31", value: 3 }])
const props = defineProps({
  echartsData: Object,
});
const emit = defineEmits(['update:modelValue', 'changeType'])
watch(props.echartsData, val => {
  echartsBarData1.value = val


}, { deep: true });


const bindChangeTab = (val) => {
  radio.value = val;
  emit('changeType', { val })
}

const bindChangeAllDate = (val, name) => {
  let params = {}
  if (name == 'month') {
    monthDate.value = val;
    yearDate.value = null;
    quarterDate.value = null;
    params.startDate = moment(val).startOf('month').format('YYYY-MM-DD');
    params.endDate = moment(val).endOf('month').format('YYYY-MM-DD')
  } else if (name == 'year') {
    yearDate.value = val;
    monthDate.value = null;
    quarterDate.value = null;
    if (route.query.type == 4) {
      params.startDate = moment(val).startOf('year').format('YYYY') + '-01-01'
      params.endDate = moment(val).startOf('year').format('YYYY') + '-12-31'
    }
  } else {
    yearDate.value = null;
    monthDate.value = null;
    quarterDate.value = val;
    let date = new Date();
    let year = yearDate.value ? moment().format("YYYY") : date.getFullYear();
    if (quarterDate.value == 0) {
      params.startDate = year + '-01-01'
      params.endDate = year + '-03-31'
    } else if (quarterDate.value == 1) {
      params.startDate = year + '-04-01'
      params.endDate = year + '-06-30'
    } else if (quarterDate.value == 2) {
      params.startDate = year + '-07-01'
      params.endDate = year + '-09-30'
    } else if (quarterDate.value == 3) {
      params.startDate = year + '-10-01'
      params.endDate = year + '-12-31'
    }
  }

  emit('changeType', { ...params })
}
// 打开弹窗方法
const open = () => {
  dialogVisible.value = true
}

defineExpose({
  open
})
</script>



<style>
</style>